import 'package:example/hanzi_copybook_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hanzi/flutter_hanzi.dart';

import 'mizi_grid_painter.dart';

class HanziPage extends StatefulWidget {
  const HanziPage({super.key});

  @override
  State<HanziPage> createState() => _HanziPageState();
}

class _HanziPageState extends State<HanziPage> {
  String? chineseData;
  int strokeIndex = 0;
  @override
  void initState() {
    rootBundle.loadString("assets/中.json").then((value) {
      setState(() {
        chineseData = value;
      });
    });
    super.initState();
  }

  void next() {
    setState(() {
      strokeIndex++;
    });
  }

  void pre() {
    setState(() {
      strokeIndex--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("笔划动画"),
        actions: [
          CupertinoButton(child: Text("字帖"), onPressed: (){
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return HanziCopybookPage();
            },));
          })
        ],
      ),
      body: buildHanziWidget(),
    );
  }


  Widget buildHanziWidget() {
    return Column(
        children: [
          Expanded(
            child: Center(
              child: SizedBox(
                  width: 200,
                  height: 200,
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      CustomPaint(
                        painter: MiziGridPainter(),
                      ),
                      HanziWidget(
                        chineseData: chineseData,
                        animationType: HanziAniType.loop,
                        strokeIndex: strokeIndex,
                        backgroundColor: Colors.blueGrey[50],
                      ),
                    ],
                  )),
            ),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: pre, child: Text("pre")),
              const SizedBox(
                width: 16,
              ),
              ElevatedButton(onPressed: next, child: Text("next")),
            ],
          ),
          const SizedBox(
            height: 16,
          ),
        ],
    );
  }
}
